import { Component, OnInit, ViewChild } from '@angular/core';
import { STColumn, STComponent, STData, STPage, STRes } from '@delon/abc/st';
import { SFSchema } from '@delon/form';
import { ModalHelper, _HttpClient } from '@delon/theme';

import { SysUserAllLimitComponent } from './all-limit/all-limit.component';
import { SysUserEditComponent } from './edit/edit.component';
import { SysUserIpLimitComponent } from './ip-limit/ip-limit.component';
import { SysUserPasswordResetComponent } from './password-reset/password-reset.component';
import { SysUserRolesComponent } from './roles/roles.component';
import { SysUserShopsComponent } from './shops/shops.component';

@Component({
  selector: 'app-sys-user',
  templateUrl: './user.component.html'
})
export class SysUserComponent implements OnInit {
  url = `api/users`;
  searchSchema: SFSchema = {
    properties: {
      keyword: {
        type: 'string',
        title: '',
        ui: {
          placeholder: '关键词'
        }
      }
    }
  };
  @ViewChild('st') private readonly st!: STComponent;
  columns: STColumn[] = [
    { title: 'UUID', index: 'uuid', className: 'text-left' },
    { title: '用户名', index: 'username', className: 'text-center' },
    { title: '昵称', index: 'nickname', className: 'text-center' },
    {
      title: '状态',
      index: 'status',
      type: 'badge',
      badge: {
        0: { text: '禁用', color: 'error' },
        1: { text: '启用', color: 'success' }
      },
      className: 'text-center',
      colSpan: 10
    },
    {
      title: '所属组织',
      index: 'company.company_name',
      className: 'text-center',
      format: (item: STData, col: STColumn, index: number) => {
        if (item.company.company_name == '') {
          return '--';
        }
        return item.company.company_name;
      }
    },
    {
      title: '操作',
      buttons: [
        {
          text: '角色',
          icon: 'plus',
          type: 'static',
          modal: {
            component: SysUserRolesComponent,
            params: (record: STData) => record,
            modalOptions: { nzMaskClosable: false }
          },
          click: 'reload'
        },
        {
          text: '店铺权限',
          type: 'static',
          modal: {
            component: SysUserShopsComponent,
            modalOptions: { nzMaskClosable: true }
          },
          click: 'reload'
        },
        {
          text: '登录限制',
          type: 'static',
          modal: {
            component: SysUserIpLimitComponent,
            params: (record: STData) => record,
            modalOptions: { nzMaskClosable: true }
          },
          click: 'reload'
        },
        {
          text: '编辑',
          icon: 'edit',
          type: 'static',
          modal: {
            component: SysUserEditComponent,
            params: (record: STData) => record,
            modalOptions: { nzMaskClosable: false }
          },
          click: 'reload'
        },
        {
          text: '密码重置',
          icon: 'edit',
          type: 'static',
          modal: {
            component: SysUserPasswordResetComponent,
            params: (record: STData) => record,
            modalOptions: { nzMaskClosable: false }
          },
          click: 'reload'
        },
        { text: '删除', type: 'del', icon: 'delete', className: 'text-error', click: (item: any) => this.del(item.ID) }
      ]
    }
  ];

  res: STRes = {
    reName: {
      total: 'data.total',
      list: 'data.list'
    }
  };

  paginate: STPage = {
    showSize: true
  };

  constructor(private http: _HttpClient, private modal: ModalHelper) {}

  ngOnInit = (): void => {};

  add(): void {
    this.modal.createStatic(SysUserEditComponent, { i: { id: 0 } }).subscribe(() => this.st.reload());
  }

  del(id: number): void {
    this.http.delete(`api/user/${id}`).subscribe(() => {
      this.st.reload();
    });
  }

  allLimit(): void {
    this.modal.createStatic(SysUserAllLimitComponent, { i: { id: 0 } }).subscribe(() => this.st.reload());
  }
}
